<template>
  <div>
    <TheHeader></TheHeader>
    <div class="banner">
      <div class="text">
        <div class="title">CRM</div>
        <div class="desc">客来易简历库为你分析每一份简历，更系统化的为你提供简历帮助</div>
        <el-button type="primary" class="try-button" size="large">免费试用</el-button>
      </div>
      <img
        src="@/assets/images/crm/CRM(3).jpg"
        alt="@/assets/images/crm/CRM(3).jpg"
        class="glass"
      />
    </div>

    <div class="count">
      <img
        src="@/assets/images/crm/CRM(2).jpg"
        alt="@/assets/images/crm/CRM(2).jpg"
        class="puzzle"
      />
      <div class="text2">
        <div class="title2"></div>
        <div class="desc2">
          客来易整合简历库、⽂档库、项⽬管理、CRM等功能于一体，帮助你获得最好、最适合你的功具。
        </div>
      </div>
    </div>

    <div class="banner" style="background-color: #fff">
      <div class="text3 text">
        <div class="title title3">越用越懂你</div>
        <div class="desc desc3">
          客来易整合简历库、⽂档库、项⽬管理、CRM等功能于一体，帮助你获得最好、最适合你的功具。
        </div>
      </div>
      <img src="@/assets/images/crm/CRM(1).jpg" alt="@/assets/images/crm/CRM(1).jpg" class="talk" />
    </div>

    <div class="count">
      <img src="@/assets/images/crm/CRM.jpg" alt="@/assets/images/crm/CRM.jpg" class="puzzle2" />
      <div class="text2 text4">
        <div class="title2">用者为王</div>
        <div class="desc2">
          客来易整合简历库、⽂档库、项⽬管理、CRM等功能于一体，帮助你获得最好、最适合你的功具。
        </div>
      </div>
    </div>

    <TheFoot></TheFoot>
  </div>
</template>

<style lang="scss" scoped>
$baseWidth: 1366px;
.talk {
  width: 472px;
  height: 336px;
  margin: 28px 0 0 310px;
}
.puzzle2 {
  width: 476px;
  height: 336px;
  margin: 0 0 60px 135px;
}

.text3 {
  margin: 60px 0 0 60px;
}

.desc3 {
  margin: 24px 0 0 130px !important;
}

.title3 {
  margin: 100px 0 0 130px !important;
}

.text4 {
  margin: 0 0 0 85px !important;
}

.banner {
  width: $baseWidth;
  height: 436px;
  display: flex;
  margin: 0 auto;
  background-color: #f8fbff;

  > .glass {
    width: 360px;
    height: 380px;
    margin: 28px 0 0 328px;
  }

  > .text {
    width: 400px;
    height: 100%;

    // background-color: red;
    > .title {
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #353535;
      margin: 100px 0 0 83px;
      font-family: PingFangSC-Semibold, PingFang SC;
    }

    > .desc {
      margin: 24px 0 0 83px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
      line-height: 28px;
      width: 456px;
    }

    > .try-button {
      width: 160px;
      height: 48px;
      background: #0071e3;
      border-radius: 24px;
      margin: 24px 0 0 80px;
      font-size: 16px;
    }
  }
}

.count {
  width: $baseWidth;
  height: 396px;
  display: flex;
  margin: 0 auto;

  > .puzzle {
    width: 476px;
    height: 336px;
    margin: 60px 0 0 135px;
  }

  > .text2 {
    width: 400px;
    height: 100%;
    margin: 60px 0 0 73px;

    > .title2 {
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #353535;
      margin: 100px 0 0 71px;
      font-family: PingFangSC-Semibold, PingFang SC;
    }

    > .desc2 {
      margin: 24px 0 0 71px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
      line-height: 28px;
      width: 456px;
    }
  }
}
</style>
